<template>
  <div class="bottom-header" v-show="tagsView">
    <el-tabs
      v-model="menuActiveName"
      @tab-click="menuTabsHandle"
      @tab-remove="removeMenuTabHandle">
      <el-dropdown class="site-tabs__tools" :show-timeout="0">
        <i class="el-icon-arrow-down el-icon--right"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="removeCurrentMenuTabHandle">关闭当前菜单标签</el-dropdown-item>
          <el-dropdown-item @click.native="removeOtherMenuTabHandle">关闭其它菜单标签</el-dropdown-item>
          <el-dropdown-item @click.native="removeAllMenuTabHandle">关闭全部菜单标签</el-dropdown-item>
<!--          <el-dropdown-item >刷新当前菜单标签</el-dropdown-item>-->
        </el-dropdown-menu>
      </el-dropdown>
      <el-tab-pane
        label="首页"
        name="/admin">
      </el-tab-pane>
      <el-tab-pane
        v-for="item in menuTabs"
        :key="item.menuId"
        :label="item.title"
        :name="item.path"
        :closable="true">
      </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
export default {
  name: "admin-header-tagViews",
  data() {
    return {

    }
  },
  computed: {
    // 当前被点击菜单名字
    menuActiveName: {
      get() {
        return this.$store.state.menu.menuActiveName
      },
      set(val) {
        this.$store.commit('menu/setMenuActiveName', val)
        // this.$store.dispatch('menu/changeSetting', {
        //   key: 'setMenuActiveName',
        //   value: val
        // })
      }
    },
    // 菜单标签列表
    menuTabs() {
      return this.$store.state.menu.menuTabs
    },
    // 是否显示菜单标签
    tagsView() {
      return this.$store.state.settings.tagsView
    },
  },
  methods: {
    /**
     * 点击菜单tab，路由跳转到菜单tab对应的组件页面
     * 注意：
     *  1、如果点击的菜单tab中包含的路由信息与当前页面显示的路由信息一致，则不进行跳转操作
     * @param {object} tabObj 点击的菜单tab对象
     */
    menuTabsHandle(tabObj) {
      if (this.$route.path !== tabObj.name) {
        this.$router.push(tabObj.name)
      }
    },
    /**
     * 点击菜单tab右侧的‘x’，删除该菜单tab
     * @param {string} tabName 菜单tab的name属性值
     */
    removeMenuTabHandle(tabName) {
      // console.log("shanchu: ", tabName)
      // 如果删除的菜单tab是‘首页’，则不做删除操作
      if (tabName === '/admin') {
        return
      }
      this.$store.commit('menu/removeMenuTab', tabName)

      this.$router.push(this.menuActiveName)
    },
    /**
     * 关闭当前显示的菜单标签，并关闭当前显示的页面
     */
    removeCurrentMenuTabHandle() {
      if (this.menuActiveName === '/admin') {
        return
      }
      this.$store.commit('menu/removeMenuTab', this.menuActiveName)

      this.$router.push(this.menuActiveName)
    },
    /**
     * 关闭除了当前页面对应的菜单tab外的其他菜单tab数据
     */
    removeOtherMenuTabHandle() {
      this.$store.commit('menu/removeOtherMenuTabOnMenuTab')
    },
    /**
     * 关闭所有菜单tab，并跳转到‘首页’页面
     */
    removeAllMenuTabHandle() {
      this.$store.commit('menu/removeAllMenuTag')

      this.$router.push(this.menuActiveName)
    }
  }

}
</script>

<style scoped>
.bottom-header {
  height: 40px;
}
/deep/ .el-tabs {
  height: 100%;
}
/deep/ .el-tabs .el-tabs__header {
  padding-left: 15px;
  margin-right: 40px;
  margin-bottom: 0;
  /*padding: 0 55px 0 15px;*/
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
  background-color: #fff;
  transition: left .3s;
  /*margin: 0;*/
}
/deep/ .el-tabs .el-tabs__header .el-tabs__nav-wrap {
  margin-bottom: 0;
}
/deep/ .el-tabs .el-tabs__header .el-tabs__nav-wrap:after {
  display: none;
}
/deep/ .el-tabs .el-tabs__content {
  width: 40px;
  position: absolute;
  right: 0;
  overflow: visible;
}
/deep/ .el-tabs .el-tabs__content .site-tabs__tools {
  bottom: 40px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);

  height: 40px;
  padding: 0 12px;
  font-size: 16px;
  line-height: 40px;
  background-color: #f1f4f5;
  cursor: pointer;
}
/deep/ .el-tabs .el-tabs__content .site-tabs__tools .el-icon--right {
  margin-left: 0;
}
</style>

<style scoped>
/deep/ .el-tabs__item {
  padding: 0 10px;
}
/*/deep/ .el-tabs__item.is-active {
  color: $--color-primary;
}
/deep/ .el-tabs__item:hover {
  color: $--color-primary;
}
/deep/ .el-tabs__active-bar {
  background-color: $--color-primary;
}*/
</style>
